import React , {useState} from "react";
import { WidthProvider, Responsive } from "react-grid-layout";
import Lock from "./lock";
const ResponsiveReactGridLayout = WidthProvider(Responsive);

const defaultLayouts = {
  lg: [],
  md: []
};

const GridWrapper = ({
  children,
  layouts = defaultLayouts,
  className
}) => {
  let dom;
  const keys = layouts.lg.map(item => item.i);
  if (Array.isArray(children)) {
    dom = keys.map((i, index) => <div key={i} className="layout-charts-wrap">{children[index]}</div>);
  } else {
    dom = keys.map(i => <div key={i}>{children}</div>);
  }

  const [isDraggable, setisDraggable] = useState(false);
  const handleSetDraggable = (isLock) => {
    setisDraggable(isLock)
  }

  return (
    <div className="grid-wrapper">
      <Lock onChange={handleSetDraggable} />
      <ResponsiveReactGridLayout
        className={className}
        layouts={layouts}
        isDraggable={isDraggable}
        rowHeight={30}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 24, md: 20, sm: 12, xs: 8, xxs: 4 }}
      >
        {dom}
      </ResponsiveReactGridLayout>
    </div>
  );
};

export default GridWrapper;
